<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
			<el-form-item label="药品名称" prop="drugdetailedinfoId" label-width="70px">
				<el-select v-model="queryParams.drugdetailedinfoId" placeholder="请输入药品名称" clearable @keyup.enter.native="handleQuery">
					<el-option v-for="item in infoOptions" :key="item.drugdetailedinfoId" :label="item.drugdetailedinfoName" :value="item.drugdetailedinfoId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="供应商" prop="supplierId" label-width="70px">
				<el-select v-model="queryParams.supplierId" placeholder="请输入供应商名称" clearable @keyup.enter.native="handleQuery">
					<el-option v-for="item in supplierOptions" :key="item.supplierId" :label="item.suppplierName" :value="item.supplierId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="仓库" prop="stockId" label-width="40px">
				<el-select v-model="queryParams.stockId" placeholder="请输入仓库名称" clearable @keyup.enter.native="handleQuery">
					<el-option v-for="item in stockOptions" :key="item.stockId" :label="item.stockName" :value="item.stockId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="40" class="mb8">
			<el-col :span="3.5"><el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAdd" v-hasPermi="['system:info:add']">药品入库</el-button></el-col>
			<el-col :span="3.5">
				<el-button type="primary" plain icon="el-icon-edit" size="medium" :disabled="single" @click="handleUpdate" v-hasPermi="['system:info:edit']">修改</el-button>
			</el-col>

			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="medium" @click="handleExport" v-hasPermi="['system:info:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="库存id" align="center" prop="stockInfoId" />
			<el-table-column label="药品预览" align="center" prop="drugPic">
				<template slot-scope="scope">
					<el-image style="width: 120px;height: 60px;" :src="scope.row.drugPic" lazy :preview-src-list="[scope.row.drugPic]"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="药品名称" align="center" key="drugdetailedinfoName" prop="sysDrugInfo.drugdetailedinfoName" />
			<el-table-column label="药品类别" align="center" key="drugClassName" prop="sysDrugInfo.sysDrugClass.drugClassName" />
			<el-table-column label="药品品牌" align="center" key="brandName" prop="sysDrugInfo.sysDrugBrand.brandName" />
			<el-table-column label="数量" align="center" prop="number" />
			<el-table-column label="供应商" align="center" key="supplierName" prop="sysSupplier.suppplierName" />
			<el-table-column label="仓库" align="center" key="stockName" prop="sysDrugStock.stockName" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:info:edit']">修改</el-button>
					<el-button size="medium" type="danger" icon="el-icon-star-on" @click="myDelete(scope.row)" v-hasPermi="['system:info:remove']">药品出库</el-button>
				</template>
			</el-table-column>
		</el-table>


		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<el-dialog :title="title1" :visible.sync="open1" width="300px" append-to-body>
			<el-form ref="formData" :model="formData" label-width="80px" size="mini">
				<el-form-item
					label="数量"
					prop="num"
					:rules="[
						{
							pattern: /^[1-9]\d*$/,
							message: '请输入大于0的整数！',
							trigger: 'change'
						}
					]"
				>
					<el-input clearable placeholder="请输入大于0的整数！" v-model="formData.num" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleDelete">确 定</el-button>
				<el-button @click="cancel1">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 添加或修改仓库库存信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="药品预览图" label-width="90px"><imageUpload v-model="form.drugPic" :limit="1" /></el-form-item>

				<el-form-item label="药品名称" prop="drugdetailedinfoId">
					<el-select v-model="form.drugdetailedinfoId" placeholder="请输入药品名称" clearable @keyup.enter.native="handleQuery">
						<el-option v-for="item in infoOptions" :key="item.drugdetailedinfoId" :label="item.drugdetailedinfoName" :value="item.drugdetailedinfoId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="数量" prop="number">
					
					<el-input v-model.number="form.number" placeholder="请输入数量"></el-input>
					</el-form-item>
				<el-form-item label="供应商" prop="supplierId">
					<el-select v-model="form.supplierId" placeholder="请输入供应商名称" clearable @keyup.enter.native="handleQuery">
						<el-option v-for="item in supplierOptions" :key="item.supplierId" :label="item.suppplierName" :value="item.supplierId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="仓库" prop="stockId">
					<el-select v-model="form.stockId" placeholder="请输入仓库名称" clearable @keyup.enter.native="handleQuery">
						<el-option v-for="item in stockOptions" :key="item.stockId" :label="item.stockName" :value="item.stockId"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo, getAll } from '@/api/drugStock/drugStockInfo';
import { List } from 'echarts';
import Speech from 'speak-tts';

export default {
	name: 'Info',
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			xjid: 0,
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 仓库库存信息表格数据
			infoList: [],
			infoList1: '',
			// 弹出层标题
			title: '',
			SVGTitleElement: '',
			infoOptions: [],
			supplierOptions: [],
			stockOptions: [],
			formData: {},
			// 是否显示弹出层
			open: false,
			open1: false,
			speech: null,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				drugdetailedinfoId: null,
				drugPic: null,
				number: null,
				supplierId: null,
				stockId: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				drugdetailedinfoId: [{ required: true, message: '药品名称不能为空', trigger: 'blur' }],
				number: [{ required: true, message: '数量不能为空', trigger: 'blur' }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'change' }],
				supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
				stockId: [{ required: true, message: '仓库不能为空', trigger: 'blur' }]
			}
		};
	},

	mounted() {
		this.getLed();
		this.speechInit();
	},
	created() {
		this.getList();
	},
	methods: {
		getLed() {
			getAll().then(response => {
				this.infoOptions = response.infoOptions;
				this.supplierOptions = response.supplierOptions;
				this.stockOptions = response.stockOptions;
			});
		},
		speechInit() {
			this.speech = new Speech();
			this.speech.setLanguage('zh-CN');
			this.speech.init().then(() => {});
		},
		/** 查询仓库库存信息列表 */
		getList() {
			this.loading = true;
			listInfo(this.queryParams).then(response => {
				for (let i = 0; i < response.rows.length; i++) {
					let drugInfo = response.rows[i];
					console.log('666');
					console.log(drugInfo);
					if (drugInfo.drugPic != null) {
						response.rows[i].drugPic = process.env.VUE_APP_BASE_API + drugInfo.drugPic;
					} else {
						response.rows[i].drugPic = '/小多啦.jpeg';
					}
				}
				this.infoList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		cancel1() {
			this.open1 = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				stockInfoId: null,
				drugdetailedinfoId: null,
				drugPic: null,
				number: null,
				supplierId: null,
				stockId: null,
				createTime: null
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.stockInfoId);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '入库操作';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const stockInfoId = row.stockInfoId || this.ids;
			getInfo(stockInfoId).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = '修改仓库库存信息';
			});
		},
		myDelete(row) {
			this.title1 = '出库操作';
			this.open1 = true;
			const stockInfoId = row.stockInfoId;
			this.xjid = stockInfoId;
			console.log('start');
			getInfo(stockInfoId).then(response => {
				console.log(response.data);
				this.infoList1 = response.data;
				this.loading = false;
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.stockInfoId != null) {
						updateInfo(this.form).then(response => {
							this.$modal.msgSuccess('修改成功');
							this.speech.speak({ text: '修改成功，呃呃呃呃呃呃呃呃' });
							this.open = false;
							this.getList();
						});
					} else {
						addInfo(this.form).then(response => {
							this.$modal.msgSuccess('入库成功，添加了' + this.form.number + '盒药品');
							this.speech.speak({ text: '入库成功，呃呃呃呃呃呃呃呃' });
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 出库按钮操作 */
		handleDelete() {
			if (this.formData.num <= this.infoList1.number) {
				console.log('=============');
				console.log(this.formData.num);
				console.log(this.infoList1.number);
				delInfo(this.xjid, this.formData.num).then(response => {
					this.$modal.msgSuccess('出库成功');
					this.speech.speak({ text: '出库成功，出库数量我是大萨比，啊啊啊啊啊啊啊啊' });
					this.xjid = 0;
					this.infoList1 = '';
					this.open1 = false;
					this.getList();
				});
			} else if (this.formData.num > this.infoList1.number) {
				this.$modal.msgError('出库失败，药品超过上限');
				this.speech.speak({ text: '出库失败，药品超过上限，我是大萨比，啊啊啊啊啊啊啊啊' });
				this.xjid = 0;
				this.infoList1 = '';
				this.open1 = false;
			}
			// }
			// });
			// this.$modal
			// 	.confirm('是否确认出库')
			// 	.then(function() {
			// 		return delInfo(stockInfoIds);
			// 	})
			// 	.then(() => {
			// 		this.getList();
			// 		this.$modal.msgSuccess('出库成功');
			// 	})
			// 	.catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'system/info/export',
				{
					...this.queryParams
				},
				`info_${new Date().getTime()}.xlsx`
			);
		}
	}
};
</script>
